@(logedUser:Option[String] = None)
<!-- top panel -->
  <div id="head-nav">
    <ul class="inline">
    @if(logedUser.isDefined){
      <li><a href="/panel"><img width="145px" height="40px" alt="Logo REWIND" src="@asset("public/assets/logo_145_40.jpg")"/></a></li>
      <li class="marg" id="user-name"><a href="/perfil">@logedUser.get</a></li>
      <li class="search">
        <input type="text" id="demo2_location" size="40" /><span class="trigger"></span>
      </li>
      <li class="marg"><a href="/mapa">MAPA</a></li>
      <li class="marg"><a href="/configuracion">CONFIGURACIÓN</a></li>
      <li class="marg"><a href="/logout">SALIR</a></li>
    } else {
      <!-- login box -->
      <div style="display:none">
        <form id="login_form" method="post" action="">
          <p id="login_error" class="fancy-error" style="display:none;">Ingrese su nombre de usuario y contraseña</p>
          <p>
            <label for="username">Usuario </label><br />
            <input type="text" id="username" name="username" size="30" />
          </p>
          <p>
            <label for="password">Contraseña</label><br />
            <input type="password" id="password" name="password" size="30" />
          </p>
          <p>
            <input type="submit" value="Entrar" />
          </p>
          <p>
            <em>Debe iniciar sesión para continuar</em><br />
            <strong>¿Olvidó su contraseña o usuario?</strong> <a href="/public/recover.htm">Recuperar</a>
          </p>
        </form>
      </div>

      <!-- register box -->
      <div style="display:none; text-align:left;">
        <form id="register_form" method="post" action="/register">
          <p id="register_error" class="fancy-error" style="display:none;">Debe rellenar todos los datos pedidos.</p>
          <p>
            <label for="usershortname"><strong>Usuario (pseudónimo)</strong><br /><em style="font-size:80%;color:#ccc;">(se usará para firmar los rewinds que escriba y para entrar al sitio)</em></label><br />
            <input type="text"id="usershortname" name="usershortname" size="30" />
          </p>
          <p>
            <label for="userfullname">Nombre real</label><br />
            <input type="text" id="userfullname" name="userfullname" size="30" />
          </p>
          <p>
            <label for="userpass">Contraseña</label><br />
            <input type="password" id="userpass" name="userpass" size="30" />
          </p>
          <p>
            <label for="userpassmatch">Repetir contraseña</label><br />
            <input type="password" id="userpassmatch" name="userpassmatch" size="30" />
          </p>
          <p>
            <label for="usermail">Correo electrónico<br /><em style="font-size:80%;color:#ccc;">(se usará solamente para ayudarle en caso de que olvide su contraseña o pseudónimo)</em></label><br />
            <input type="text" id="usermail" name="usermail" size="30" />
          </p>
          <p>
            <input type="submit" value="Registrarse" />
          </p>
          <p>
            <em>Al entregar sus datos confirma aceptar nuestras políticas <br/>y se adhiere a los términos del servicio. <a href="/tds">Más información</a>.</em>
          </p>
        </form>
      </div>

      <li><img width="145px" height="40px" alt="Logo REWIND" src="@asset("public/assets/logo_145_40.jpg")"/></li>
      <li class="marg"><a href="#register_form" id="register-box-launcher">REGISTRARSE</a></li>
      <li></li>
      <li class="marg"><a href="/mapa">MAPA</a></li>
      <li class="marg"><a id="login-box-launcher" href="#login_form">INICIAR SESIÓN</a></li>
    }
     </ul>
  </div>
